<template>
  <div class="code-validate">
    <div
      class="code-validate__header h-50px flex justify-end items-center px-16px"
    >
      <svg class="h-14px w-14px fill-text-6" @click="$router.go(-1)">
        <use xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Close"></use>
      </svg>
    </div>
    <div class="code-validate__body h-[calc(100vh-50px)] p-16px">
      <div class="code-validate__title text-center">
        <img
          class="h-34px"
          alt="img"
          src=""
        />
        <div class="text-15px text-text-3 font-700 my-8px">
          {{ $t("title") }}
        </div>
        <div class="text-12px my-8px leading-18px">
          {{ $t("desc_1") }}
          <span class="text-text-3">{{ phone }}</span>
          {{ $t("desc_2") }}
        </div>
      </div>
      <BcSmsCodeInput />
      <div class="text-text-15 text-12px text-center py-8px">
        {{ $t("validate_msg") }}
      </div>
      <div class="send text-text-5 text-12px text-center mt-12px">
        {{ $t("send") }}
      </div>
      <div class="send text-12px text-center mt-12px text-text-4">
        {{ $t("trouble") }}
        <span class="text-text-3" @click="visible = true">{{
          $t("learn")
        }}</span>
      </div>
    </div>
  </div>
  <van-dialog v-model:show="visible" :show-confirm-button="false">
    <div class="p-17px">
      <div class="title text-14px text-text-3 font-700 text-center mb-18px">
        {{ $t("dialog.title") }}
      </div>
      <div class="text-11 leading-14px">
        {{ $t("dialog.desc") }}
      </div>
      <div class="text-12px mb-15px">
        {{ $t("dialog.section_1") }}
      </div>
      <div class="text-12px mb-15px">
        {{ $t("dialog.section_2") }}
      </div>
      <div class="text-12px mb-15px">
        {{ $t("dialog.section_3") }}
      </div>
      <div class="text-12px mb-15px">
        {{ $t("dialog.section_4") }}
      </div>
      <van-button
        @click="visible = false"
        block
        native-type="submit"
        class="text-text-3 bc-login-btn !w-[100%]"
      >
        {{ $t("dialog.ok") }}
      </van-button>
    </div>
  </van-dialog>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import BcSmsCodeInput from "@/components/bc-sms-code-input/index.vue";
const { t } = useI18n();
const $t = key => {
  return t("code-validate." + key);
};
const phone = ref(123123);
const visible = ref(false);
</script>

<style></style>
